<template>
  <div class="service-standard">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="家政服务标准">
      <van-icon slot="left" name="arrow-left" @click="$router.back()" />
    </van-nav-bar>
    <!-- 服务标准 -->
    <van-cell class="title"><h2>服务标准</h2></van-cell>
    <van-cell>
      <van-row type="flex" justify="space-between" align="center">
        <van-col :span="4">服务区域</van-col>
        <van-col class="text-right" @click="showSelectArea = true">{{ formData.area }} <van-icon name="arrow-down" /></van-col>
        <select-area :showSelectArea="showSelectArea" @confirm="confirmArea" @close="showSelectArea = false" />
      </van-row>
    </van-cell>

    <toggle-tag :showTitle="'服务类型'" :tag-list="Company.occupation" :tag-data="formData.serviceType" @pushTag="pushType" @spliceTag="spliceType" />
    <toggle-tag :radio="true" :showTitle="'星级标准'" :tag-list="Company.star" :tag-data="formData.starData" @change="change" />
    <van-button class="query" type="info" block @click="serviceQuery">家政服务标准查询</van-button>
  </div>
</template>

<script>
import Company from '@/api/constant/company'
import { validEmptyString } from '@/utils/config'

export default {
  name: 'ServiceStandard',
  data () {
    return {
      Company,
      formData: {
        area: '请选择地区',
        serviceType: [],
        starData: ''
      },
      showSelectArea: false // 控制注册地区弹出层
    }
  },
  created () {},
  mounted () {},
  methods: {
    pushType (item) {
      this.formData.serviceType.push(item.name)
    },
    spliceType (index, value) {
      this.formData.serviceType.splice(index, value)
    },
    change (item) {
      this.formData.starData = item.name
    },
    confirmArea (value) {
      this.formData.area = value.map(item => item.name).join('-')
      this.showSelectArea = false
    },
    async serviceQuery () {
      try {
        validEmptyString(this.formData)
        this.$toast.loading({
          message: '查询中...', // 展示时的提示信息
          forbidClick: true, // 展示时, 静止点击背景
          duration: 0 // toast 展示时间 默认为2秒, 0 表示持续展示
        })
        console.log(this.formData)
        this.$toast.success('查询服务成功')
        this.$router.push('/staff')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="less">
.service-standard {
  position: relative;
  .title {
    height: 100px;
    align-items: center;
    h2 {
      height: 36px;
      margin: 0;
      padding-left: 20px;
      border-left: 10px solid #3f51b5;
      color: #101010;
      font-size: 30px;
      line-height: 36px;
      font-weight: normal;
    }
  }
  .text-right {
    flex: 1;
    text-align: right;
  }
  .query{
    position: fixed;
    bottom: 0px;
    font-size: 32px;
    font-weight: bold;
  }
}
</style>
